<template>
  <div class="tab-control">
    <template v-for="(content, index) in contents"
    :key="content"
    >
      <div class="tab-controll-item"
      @click="tabControlClick(index)"
      >
        <span>{{ content }}</span>
      </div>
    </template>
  </div>
</template>

<script>
  export default {
    props: {
      contents: {
        type: Array,
        default: () => []
      }
    },
    methods: {
      tabControlClick(index) {
        this.$emit("tabItemClick",index)
      }
    }
  }
</script>

<style scoped>
</style>